<template>
  <div class="resumeRecommend">
    <div class="titleTop first">
      <h3>{{$t('navigation.review_resume')}} “{{resumeData && resumeData.basic && resumeData.basic.name}}”</h3>
      <!-- <a href="javascript:;" @click="closeEmail(true)" class="blue">{{$t('candidateApplication.send_rsume_email')}}</a> -->
      <span class="back" @click="back"><i class="iconfont icon-zuojiantou"></i>{{$t('common.back')}}</span>
    </div>
    <div class="contentCard">
      <a-card class="formData">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" :tab="$t('candidateApplication.normal_resume')">
            <div v-if="loadingResume" style="text-align:center">
              <a-spin/>
            </div>
            <resume-standard :positionInfo="positionInfo" v-else :positionId="positionId" :resumeData="resumeData" :id="id"/>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" :tab="$t('candidateApplication.original_resume')" force-render v-if="orcView && orcView.length > 0">
            <a-select style="width:320px;" v-model="selectAttachId" @change="changeResume">
              <a-select-option v-for="item in orcView" :key="item._id" :value="item._id" :fileType="item.fileType">
                {{item.name}}
              </a-select-option>
            </a-select>
            <div>
              <iframe ref="iframeResume" v-if="orcView" :src="`${this.resumeData.resumeOR}?attachmentId=${selectAttachId}&fileType=${fileType}`" class="iframe" ></iframe>
            </div>
          </a-tab-pane> -->
          <!-- <a-tab-pane key="3" :tab="$t('candidateApplication.recommend_reason')">
            <div v-if="loadingTemp" style="text-align:center">
              <a-spin/>
            </div>
            <div v-else v-for="record in recReasonTemplates.fields" :key="record.fullPath" class="recReasonTemplates">
              <p>{{record.title}}</p>
              <p v-html="record.FieldVal"></p>
            </div>
          </a-tab-pane> -->
          <template slot="tabBarExtraContent">
            <i class="iconfont icon-bianji" @click="activeKey === '1' ? recommedResume(true) : recommedReason(true)" v-if="activeKey === '1' || activeKey === '3'"></i>
          </template>
        </a-tabs>
        <!-- <iframe ref="iframeResume" src="/jobboard/jobboardcandidates/hunter/hunterRecommendationView" class="iframe"></iframe> -->
      </a-card>
      <div class="navs">
          <a-card :title="$t('candidateApplication.cadidata_navs')" class="resumeCard" size="small">
            <a-pagination simple :current="current" :pageSize="1" :total="max" @change="pageChange"/>
          </a-card>
          <!-- <a-card :title="$t('candidateApplication.position_info')" class="positionInfo" size="small" :loading="loading2">
            <h4 class="blue">{{positionInfo.name}}</h4>
            <p>{{$t('candidateApplication.enterpriseName')}}：<span>{{positionInfo.enterpriseName}}</span></p>
            <p>{{$t('candidateApplication.status')}}：<span :class="positionInfo.candidateStatus === 'RECOMMENDATION_FAILED' || positionInfo.candidateStatus === 'RECOMMENDATION_AUDIT_FAILED' ? 'red' : 'green'">{{positionInfo.candidateDisplayStatus}}</span></p>
            <p v-if="positionInfo.candidateStatus === 'RECOMMENDATION_FAILED'">{{$t('candidateApplication.failedReason')}}：<span class="red">{{positionInfo.failedReason}}</span></p>
            <p v-if="positionInfo.candidateStatus === 'RECOMMENDATION_AUDIT_FAILED'">{{$t('candidateApplication.failedReason')}}：<span class="red">{{positionInfo.auditReason}}</span></p>
            <p v-if="recommendInfo.status === 'COOPERATION_FAILED' && recommendInfo.hunterReason">拒绝理由：<span class="red">{{recommendInfo.hunterReason}}</span></p>
            <p>{{$t('candidateApplication.dateUpdated')}}：<span>{{positionInfo.dateUpdated}}</span></p>
            <template slot="actions">
              <p class="bg">{{$t('candidateApplication.recommend_date')}}：<span>{{positionInfo.deliverTime}}</span></p>
            </template>
          </a-card> -->
          <!-- <a-card :title="$t('candidateApplication.original_resume_file')" class="enclosure nofirstBd" size="small" :loading="loading3"   v-if="resumeAttachments && resumeAttachments.length > 0">
            <ul>
              <li v-for="item in resumeAttachments" :key="item._id">
                <a-tooltip>
                  <template slot="title">
                    {{item.name}}
                  </template>
                  <a class="blue" :href="item.url">{{item.name}}</a>
                </a-tooltip>
              </li>
            </ul>
          </a-card> -->
          <!-- <a-card :title="$t('candidateApplication.resume_file')" class="enclosure" size="small" :loading="loading3">
            <a-upload-dragger
              :showUploadList="false"
              name="file"
              :multiple="true"
              :headers="{Authorization}"
              :data="{id, resumeId: resumeData.id, isRPO: this.positionInfo.isRPO || 'N'}"
              :beforeUpload="beforeUpload"
              action="/jobboard/jobboardcandidates/hunter/uploadFile"
              @change="handleChange">
              <p class="ant-upload-drag-icon">
                <a-icon type="upload" />
              </p>
              <p class="ant-upload-text">
                {{$t('candidateApplication.drag_file_here')}} <br/>
              <span class="types">{{$t('candidateApplication.file_type')}} "DOC", "doc", "DOCX", "docx", "HTML", "html", "PDF", "pdf", "TXT", "txt", "mht", "jpg", "bmp", "png" </span>
              </p>
            </a-upload-dragger>
            <ul v-if="otherAttachments && otherAttachments.length > 0">
              <li>
                <span>{{$t('candidateApplication.file_name')}}</span>
                <span>{{$t('candidateApplication.operate')}}</span>
              </li>
              <li v-for="item in otherAttachments" :key="item._id">
                 <a-tooltip>
                  <template slot="title">
                    {{item.name}}
                  </template>
                  <a :href="item.url" target="_blank">{{item.name}}</a>
                </a-tooltip>
                <span class="red" @click="deleteAtta(item.attachmentId)"><i class="iconfont icon-shanchu"></i></span>
              </li>
            </ul>
          </a-card> -->
      </div>
    </div>
    <!-- <sendEmail :visible="email" @close="closeEmail" :deliveryId="id" :resumeAttachments="[...resumeAttachments, ...otherAttachments]"></sendEmail> -->
    <resume-edit :positionInfo="positionInfo" :visible="isshowResume" @close="(flag) => recommedResume(false, flag)" :id="id" :positionId="positionId" :resumeId="resumeData.id" :enterpriseId="enterpriseId" :resumeData="resumeDataTmp"/>
    <position-rec-reason-edit :resumeData="resumeDataTmp" :positionInfo="positionInfo" :visible="isshowReason" @close="(flag) => recommedReason(false, flag)" :positionId="positionId" :id="id" :enterpriseId="enterpriseId" :recommendInfo="recommendInfo"/>
  </div>
</template>

<script>
import loGet from 'lodash.get'
import loSet from 'lodash.set'
// import { mapMutations, mapState } from 'vuex' resumeInfo, recommendInfo, positionInfo
// import CountCard from '@/components/CountCard/CountCard'mapState,
import ResumeStandard from '@/components/resume/ResumeStandard'
import ResumeEdit from '@/components/resume/ResumeEdit'
import PositionRecReasonEdit from '@/components/position/PositionRecReasonEdit'
// import Informations from '@/components/Common/Informations'
import { resumeInfo } from '@/api/resume'
import { mapState } from 'vuex'
export default {
  name: 'resumeRecommend',
  components: { ResumeStandard, ResumeEdit, PositionRecReasonEdit },
  data () {
    return {
      loGet,
      loSet,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      activeKey: '1',
      email: false,
      selectAttachId: '',
      // resumeAttachmentUrl: '',
      fileType: '',
      id: '',
      more: false,
      enterpriseId: '',
      recReasonTemplates: [],
      positionId: '',
      resumeData: {},
      resumeDataTmp: {},
      loadingResume: false,
      loadingTemp: false,
      recommendInfo: {},
      positionInfo: {},
      // attachments: null,
      otherAttachments: [],
      resumeAttachments: [],
      isshowResume: false,
      isshowReason: false,
      deliveryList: [],
      positionList: [],
      enterpriseIdList: [],
      form: this.$form.createForm(this),
      formBtn: false,
      mesgCount: 0,
      notReadMessageCount: 0,
      backPath: '',
      msgPageNum: 1,
      current: 1,
      orcView: null,
      max: 1
    }
  },
  created () {
    this.id = this.$route.query.id
    this.positionId = this.$route.query.positionId
    this.getResumeData()
    this.setResumeList()
    // this.getShowORCView()
    // this.getMessageList()
  },
  computed: {
    ...mapState({
      Authorization: function (state) {
        let token = state.common.loginInfo && state.common.loginInfo.token
        return token
      }
    })
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        if (val.query.id !== oldVal.query.id) {
          this.id = val.query.id
          this.positionId = val.query.positionId
          this.getResumeData()
          // this.getShowORCView()
          // this.getMessageList()
          this.loading = false
        }
      },
      deep: true
    }
  },
  methods: {
    // getRecData (val) {
    //   // let arr = val.split('.')
    //   // let tmpdata = null
    //   // let that = this
    //   // // 循环处理数据
    //   // arr.some((j, index) => {
    //   //   if (!index) {
    //   //     tmpdata = that.recommendInfo[j]
    //   //   } else {
    //   //     tmpdata = tmpdata[j]
    //   //   }
    //   // })
    //   // return tmpdata
    //   // let arr = record.fullPath.split('.')
    //   if (JSON.stringify(this.recommendInfo) !=== ) {
    //     return eval(`this.recommendInfo.${val}`)
    //   }
    // },
    beforeUpload (file) {
      // "DOC", "doc", "DOCX", "docx", "HTML", "html", "PDF", "pdf", "TXT", "txt", "mht", "jpg", "bmp", "png"
      const reg = /\.(DOC|doc|DOCX|docx|HTML|html|PDF|pdf|TXT|txt|mht|jpg|bmp|png)(\?.*)?$/
      return new Promise((resolve, reject) => {
        if (reg.test(file.name)) {
          const isLt20M = file.size / 1024 / 1024 < 20
          if (!isLt20M) {
            this.$message.error(this.$t('candidateApplication.file_size_20m'))
            return false
          }
          // this.fileList = [...this.fileList, file]
          resolve(file)
        } else {
          this.$message.error(`${this.$t('candidateApplication.correct_file_type')}`)
          reject(new Error(`${this.$t('candidateApplication.correct_file_type')}`))
        }
      })
    },
    setIframeHeight () {
      let iframe = this.$refs.iframeResume
      if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow
        if (iframeWin.document.body) {
          iframe.height = iframeWin.document.documentElement.offsetHeight || iframeWin.document.body.offsetHeight
        }
      }
    },
    closeEmail (flag) {
      this.email = flag
    },
    pageChange (e) {
      this.current = e
      this.$router.push({ query: { positionId: this.positionList[e - 1], id: this.deliveryList[e - 1] } })
    },
    setResumeList () {
      let deliveryList = JSON.parse(sessionStorage.getItem('resumeList')).deliveryList
      this.deliveryList = deliveryList
      this.positionList = JSON.parse(sessionStorage.getItem('resumeList')).positionList
      this.enterpriseIdList = JSON.parse(sessionStorage.getItem('resumeList')).enterpriseIdList
      this.backPath = JSON.parse(sessionStorage.getItem('resumeList')).fullPath
      deliveryList.some((item, index) => {
        if (item === this.id) {
          this.current = index + 1
        }
      })
      this.max = deliveryList.length
    },
    recommedResume (flag, update) {
      if (update) {
        this.getResumeData()
      }
      this.isshowResume = flag
    },
    recommedReason (flag, update) {
      if (update) {
        this.getTemplates()
      }
      this.isshowReason = flag
    },
    changeResume (key, e) {
      this.fileType = e.data.attrs.fileType
    },
    async getResumeData () { // 获取简历标准数据
      this.loadingResume = true
      let res = await resumeInfo({ id: this.id, positionId: this.positionId })
      if (res.code === 200) {
        // 处理表单数据并传递给页面
        this.resumeData = res.data.info
        this.resumeDataTmp = res.data
        // c处理附件
        // this.orcView = res.data.extensionFields && res.data.extensionFields.resumeAttachments && res.data.extensionFields.resumeAttachments.map(item => {
        //   item.fileType = item.name && item.name.split('.').slice(-1)[0]
        //   return item
        // })
        // this.orcView.push({
        //   _id: 'yiqwyeiuqyw',
        //   name: 'wyeiwy',
        //   fileType: 'html'
        // })
        // if (this.orcView && this.orcView[0]) {
        //   // this.resumeAttachmentUrl = this.orcView[this.orcView.length - 1].url
        //   this.selectAttachId = this.orcView[0]._id
        //   this.fileType = this.orcView[0].fileType
        // }
        // this.findAtta()
      } else {
        this.$message.error(res.message)
      }
      this.loadingResume = false
    },
    // async getShowORCView () { // 获取简历原文
    //   let params = {
    //     // enterpriseId: this.enterpriseId,
    //     // positionId: this.positionId
    //     id: this.id
    //   }
    //   let res = await showORCView(params)
    //   if (res.code === 200) {
    //     this.orcView = res.data
    //     this.selectAttachId = res.data.attachments && res.data.attachments[0]._id
    //   } else {
    //     this.$message.error(res.message)
    //   }
    // },
    // async getTemplates () { // 获取推荐页面
    //   this.loadingTemp = true
    //   let params = {
    //     positionId: this.positionId,
    //     isRPO: this.positionInfo.isRPO || 'N'
    //   }
    //   let res = await recommendReasonTemplate(params)
    //   if (res.code === 200) {
    //     // this.recReasonTemplates = res.data
    //     this.getRecommendInfo(res.data)
    //   } else {
    //     this.loadingTemp = false
    //     this.$message.error(res.message)
    //   }
    // },
    // async getRecommendInfo (recReasonTemplates) { // 获取推荐说明
    //   let res = await recommendInfo({ id: this.id, positionId: this.positionId })
    //   if (res.code === 200) {
    //     let tmp = { ...res.data, ...this.resumeData }
    //     // 处理表单数据并传递给页面
    //     recReasonTemplates.fields.forEach(item => {
    //       let path = item.fullPath.substring(0, item.fullPath.indexOf('.'))
    //       if (path === 'position' || path === 'application') {
    //         item.required = false
    //         item.disabled = true
    //         item.fullPath = item.fullPath.substring(item.fullPath.indexOf('.') + 1)
    //       }
    //       if (this.loGet(tmp, item.fullPath) instanceof Array) {
    //         item.FieldVal = this.loGet(tmp, item.fullPath).map(val => val.name).join(',')
    //       } else if (item.enums && !!item.enums.length) {
    //         item.enums.some(val => {
    //           let tmpdata = this.loGet(tmp, item.fullPath)
    //           if (tmpdata === val.id) {
    //             item.FieldVal = val.name
    //             return true
    //           }
    //         })
    //       } else {
    //         let tmpdata = this.loGet(tmp, item.fullPath)
    //         item.FieldVal = tmpdata
    //       }
    //     })
    //     this.recommendInfo = res.data
    //     this.recReasonTemplates = recReasonTemplates
    //   } else {
    //     this.$message.error(res.message)
    //   }
    //   this.loadingTemp = false
    // },
    // async getpositionInfo () { // 获取职位信息
    //   this.loading2 = true
    //   let res = await positionInfo({ id: this.id, positionId: this.positionId })
    //   if (res.code === 200) {
    //     // 处理表单数据并传递给页面
    //     this.positionInfo = res.data
    //     this.getTemplates()
    //   } else {
    //     this.$message.error(res.message)
    //   }
    //   this.loading2 = false
    // },
    // async findAtta () { // 获取简历附件
    //   this.loading3 = true
    //   let res = await findAttachments({ id: this.id, positionId: this.positionId, resumeId: this.resumeData.id })
    //   if (res.code === 200) {
    //     this.otherAttachments = res.otherAttachments || []
    //     this.resumeAttachments = res.resumeAttachments || []
    //   } else {
    //     this.$message.error(res.message)
    //   }
    //   this.loading3 = false
    // },
    // async deleteAtta (attachmentId) { // 删除单个建立附件
    //   let res = await deleteAttachment({ id: this.id, otherAttachments: true, attachmentId, resumeId: this.resumeData.id })
    //   if (res.code === 200) {
    //     this.findAtta()
    //   } else {
    //     this.$message.error(res.message)
    //   }
    // },
    // handleChange (e) {
    //   if (e.file.status === 'done') {
    //     this.findAtta()
    //     this.$message.success('附件上传成功！')
    //   } else if (status === 'error') {
    //     this.$message.error(e.file.response.message)
    //   } else if (status === 'removed') {
    //   }
    // },
    back () {
      this.$router.push(this.backPath)
    },
    callback (e) {
      this.activeKey = e
      if (e === '2') {
        this.$nextTick(() => {
          setTimeout(this.setIframeHeight, 300)
        })
      }
    },
    saveFormData () {
      this.formBtn = true
      this.$refs.iframeResume.contentWindow.postMessage('ddfEvent_submitForm', '*')
      this.formBtn = false
    },
    perfectDetail () {
      this.showDetail = !this.showDetail
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.resumeRecommend
  :global(.Informations .ant-card-body)
    padding 24px!important
  :global(.Informations .sendInfo)
    border none
  :global(.Informations .sendInfo .ant-card-body)
    padding 0 0 12px 0!important
  .iframe
    width 100%
    min-height 700px
    text-align center
    border none
    margin-top 24px
    border 1px solid borderColor
  .types
    font-size 12px
    color textGrey
  .recReasonTemplates
    padding 0  0 24px 0
    p
      word-break break-all
      &:first-child
        color labelColor
  .navbtn
    margin-top 24px
    text-align center
  .blue
    color var(--blue-500)!important
  .green
    color lightGreen!important
  .red
    color errorColor!important
  .titleTop
    background #fff
    display flex
    align-items center
    justify-content flex-start
    padding  0 24px 12px
    h3
      margin-right 24px
      font-size 18px
      font-weight bold
    .back
      margin-left auto
      margin-right 7px
      cursor pointer
      color var(--blue-500)
  .contentCard
    display flex
    margin 12px 24px
    .formData
      flex 1
      :global(.ant-card-body)
        padding 0
        :global(.ant-tabs-bar)
          padding 12px
      :global(.ant-tabs-nav .ant-tabs-tab:after)
        content ''
        position absolute
        top 12px
        right -16px
        height 26px
        width 1px
        background borderColor
      :global(.ant-tabs-nav .ant-tabs-tab:last-child:after)
        height 0
      :global(.ant-tabs-tabpane)
        padding 0 24px
    .navs
      width 360px
      margin-left 12px
      :global(.ant-upload.ant-upload-drag)
        width 70%
        height 50%
        margin-left 15%
      ul
        margin-top 12px
        li
          border-top 1px solid borderColor
          line-height 32px
          display flex
          justify-content space-between
          padding 0 12px
          a
            text-overflow ellipsis
            overflow hidden
            white-space nowrap
            word-break break-all
          .red
            margin-left 6px
          &:last-child
            border-bottom 1px solid borderColor
      .nofirstBd
        li:first-child
          border none
      .resumeCard
        :global(.ant-card-body)
          text-align center
      .positionInfo
        margin-top 12px
        line-height 28px
        p
          color textGrey
        span,.bg
          color black
        h4
          font-weight bold
      .enclosure
        margin-top 12px
        :global(.ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon)
          font-size 36px
        :global(.ant-upload.ant-upload-drag p.ant-upload-text)
          font-size 14px
</style>
